<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>飞机跑道进度条动画特效 </title>
	<link rel="stylesheet" href="css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

	<div class="container">
		<div class="progress">
			<div class="progress-bar" style=" background:#005394;width: 0%;">
				<span></span>
			</div>
		</div>

		<div class="progress">
			<div class="progress-bar" style=" background:#005394;width: 10%;">
				<span></span>
			</div>
		</div>

		<div class="progress">
			<div class="progress-bar" style=" background:#005394;width: 10%;">
				<span></span>
			</div>
		</div>


	</div>
	<script type="text/javascript">

		/* 
			1-  0-100 数字 变化--定时 每隔一段时间，变化一次
		*/
		var i = 0;

		// 保存定时器的返回值
		var timer = setInterval(function () {
			// console.log(i);
			//拼接字符串--百分比
			var percent = i + '%';
			console.log(percent);

			// 给progress-bar 行内样式width 
			var pBar = document.querySelector('.progress-bar');
			pBar.style.width = percent
			// 给 span 内容
			// var span = document.querySelector('.progress-bar span');
			// 也可以从一个元素中 使用querySelector
			var span = pBar.querySelector('span');
			span.innerHTML = percent



			if (i == 100) {
				//清除定时器
				clearInterval(timer)
			}
			i++;
		}, 30)


	</script>
</body>

</html>